<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" />
    <script src="//aloe-static.oss-cn-hangzhou.aliyuncs.com/zoom/zoom75.js"></script>
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html{
            height: 100%;
        }
        body{
            background: white;
            height: 100%;
        }

        .videoBox {
            max-width: 750px;
            height: 100%;
            background: #ccc;
            position: relative;
        }
        .load {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background: #333;
            z-index: 100;
            display: none;
        }
        p {
            margin-bottom: 20px;
            text-align: justify;
        }
        .playBtn2, .playBtn1 {
            position: absolute;
            left: 50%;
            top:20px;
            z-index: 999;
        }
    </style>
</head>
<body>
<p>	<a href="javascript:;" class="playBtn1" style="display: block;width:100px; background: #222;color:#fff; line-height: 40px; text-align: center;margin:14px 0">点击播放</a></p>
<div class="videoBox">
    <canvas id="canvas" width="750" height="1220"></canvas><p></p>
    <div class="load" id="loadWrap" style="display: none;">
        <div class="loading"></div>
    </div>
</div>
<!--x5-video-player-fullscreen="true"  autoplay="autoplay"-->
<!--<video  id="js-last" class="video-js  videoBox"  muted  preload="load" playsinline x-webkit-airplay="true" webkit-playsinline x5-video-player-type="h5"  x5-video-orientation="portrait" width="100%" height="100%" src="http://aloeh5.oss-cn-hangzhou.aliyuncs.com/ufsmmbb/video/v1.1/6.mp4"></video>-->
</body>
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="jsmpg.js"></script>
<script>
    window.addEventListener('load',function() {
        var canvas = document.getElementById('canvas'), off1 = true;
        document.querySelector('.playBtn1').onclick = function () {
            if (off1) {
                off1 = false;
                document.querySelector('#loadWrap').style.display = 'block'
                var player = new jsmpeg('6.mpg', {
                    canvas: canvas,
                    onload: function () {
                        document.querySelector('#loadWrap').style.display = 'none';
                        player.play();
                    },
                    onfinished: function () {
                        off1 = true;
                        console.log("播放完毕");
                    }
                });
            }
            ;
        };
    });
</script>
</html>